<template>
    <div class="flex_column flex_between w_100 h_100 border_box pdl_16 pdr_16">
        <!-- <div>
            <card-title :width="274" text="环状图1"></card-title>
            <card class="mgt_8" :width="274" :height="250" type="inner">
                <div class="flex_row_center h_100 w_100 border_box pd_16">
                    <div class="legend">
                        <div
                            v-for="(price, index) in priceListRef"
                            :key="index"
                            class="legend_item flex_row_center mgb_28">
                            <span class="legend_item_icon mgr_8" :style="{ background: price.color }"></span>
                            <span class="legend_item_range flex_1 mgr_8">{{ price.rangeFormat }}</span>
                            <span class="legend_item_percentage">{{ price.percentage }}</span>
                        </div>
                    </div>
                    <div class="echart_content flex_1">
                        <zt-echart :opts="priceOpts"></zt-echart>
                    </div>
                </div>
            </card>
        </div>
        <div>
            <card-title :width="274" text="环状图2"></card-title>
            <card class="mgt_8" :width="274" :height="250" type="inner">
                <div class="flex_row_center h_100 w_100 border_box pd_16">
                    <div class="legend">
                        <div v-for="(age, index) in ageListRef" :key="index" class="legend_item flex_row_center mgb_28">
                            <span class="legend_item_icon mgr_8" :style="{ background: age.color }"></span>
                            <span class="legend_item_range flex_1 mgr_8">{{ age.rangeFormat }}</span>
                            <span class="legend_item_percentage">{{ age.percentage }}</span>
                        </div>
                    </div>
                    <div class="echart_content flex_1">
                        <zt-echart :opts="ageOpts"></zt-echart>
                    </div>
                </div>
            </card>
        </div>
        <div>
            <card-title :width="160" text="性别"></card-title>
            <card class="mgt_8 border_box pd_20" :width="160" :height="250" type="inner">
                <div class="flex_row_center flex_between w_100 h_100 pdl_20 pdr_10 border_box">
                    <div
                        v-for="(sex, index) in sexListRef"
                        :key="index"
                        class="flex_column flex_center white flex_none">
                        <img :src="sex.icon" />
                        <span class="fs_13 mgt_8">{{ sex.sex }}</span>
                        <span class="fs_13 mgt_8">{{ sex.percentage }}</span>
                    </div>
                </div>
            </card>
        </div> -->


        <div style="padding-top: 10px;display: flex;">
            <ElSelect filterable v-model="DialogValue" placeholder="请选择场景" style="width: 250px;">
                <ElSelect.Option v-for="i in priceList" :key="i.id" :value="i.id" :label="i.name" />
            </ElSelect>
            <card-title style="flex: 1;" :width="160" :text="priceList[DialogValue].name"></card-title>
        </div>

        <!-- 横向排列，展示四个数据，添加缓动效果 -->
        <div class="data-balls-container">
            <!-- 温度球（橙色） -->
            <div class="data-ball temperature">
                <div class="ball-value">24℃</div>
                <div class="ball-label">温度</div>
            </div>
            <!-- 湿度球 -->
            <div class="data-ball humidity">
                <div class="ball-value">68%</div>
                <div class="ball-label">湿度</div>
            </div>
            <!-- 光照球 -->
            <div class="data-ball light">
                <div class="ball-value">4200lx</div>
                <div class="ball-label">光照</div>
            </div>
            <!-- CO2球 -->
            <div class="data-ball co2">
                <div class="ball-value">486ppm</div>
                <div class="ball-label">CO2</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Card, CardTitle, ZtEchart } from "@ztstory/datav-core";
// import type { CountRangeItem, SexItem } from "@/model/model";
// import { computed } from "vue";
// import { getPercent } from "@ztstory/datav-core/src/utils/common.util";
// import svg_male from "@/assets/male.svg";
// import svg_female from "@/assets/female.svg";
// import { createPieOpts, createPieSeriesItem } from "@ztstory/datav-core/echarts-opts";
import { ElDialog, ElSelect } from 'element-plus';
import { ref } from 'vue';

// interface Props {
//     priceList?: CountRangeItem[];
//     ageList?: CountRangeItem[];
//     sexList?: SexItem[];
// }
// const props = defineProps<Props>();
const openDialg = ref(false);
const DialogValue = ref(0);

const priceList = [
    { name: "实验楼A区域", id: 0 },
    { name: "实验楼B区域", id: 1 },
    { name: "实验楼C区域", id: 2 },
    { name: "实验楼D区域", id: 3 },
    { name: "实验楼E区域", id: 4 },
]


const openMsg = () => {
    openDialg.value = true;
};

// const priceColors = ["#1EC873", "#FFA200", "#3880F9", "#B945FF"];
// const priceListRef = computed(() => {
//     if (!props.priceList) {
//         return [];
//     }
//     const total = props.priceList.reduce((acc, v) => acc + Number(v.count), 0);
//     return props.priceList?.map((item, index) => {
//         if (index > priceColors.length - 1) {
//             index = priceColors.length - 1;
//         }
//         return {
//             ...item,
//             color: priceColors[index],
//             percentage: getPercent(Number(item.count), total),
//         };
//     });
// });

// const priceOpts = computed(() => {
//     const values = props.priceList?.map((item) => {
//         return {
//             value: Number(item.count),
//         };
//     });

//     const pieOpts = createPieOpts(priceColors);
//     pieOpts.series = [createPieSeriesItem(values)];

//     return pieOpts;
// });

// const ageColors = ["#FDFF04", "#00F7FF ", "#F562FF", "#0DFF85"];
// const ageListRef = computed(() => {
//     if (!props.ageList) {
//         return [];
//     }
//     const total = props.ageList.reduce((acc, v) => acc + Number(v.count), 0);
//     return props.ageList?.map((item, index) => {
//         if (index > ageColors.length - 1) {
//             index = ageColors.length - 1;
//         }
//         return {
//             ...item,
//             color: ageColors[index],
//             percentage: getPercent(Number(item.count), total),
//         };
//     });
// });
// const ageOpts = computed(() => {
//     const values = props.ageList?.map((item) => {
//         return {
//             value: Number(item.count),
//         };
//     });

//     const pieOpts = createPieOpts(ageColors);
//     pieOpts.series = [createPieSeriesItem(values)];

//     return pieOpts;
// });

// const sexListRef = computed(() => {
//     if (!props.sexList) {
//         return [];
//     }
//     const total = props.sexList.reduce((acc, v) => acc + Number(v.count), 0);
//     return props.sexList?.map((item) => {
//         return {
//             ...item,
//             icon: item.sex == "男" ? svg_male : svg_female,
//             percentage: getPercent(Number(item.count), total),
//         };
//     });
// });
</script>

<style scoped lang="less">
.legend {
    font-size: 13px;
    color: @white;

    &_item {
        width: 118px;

        &_icon {
            width: 6px;
            height: 6px;
            border-radius: 3px;
        }
    }

    .legend_item:last-child {
        margin-bottom: 0;
    }
}

.echart_content {
    height: 100%;
}

.data-balls-container {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 20px;
    padding: 10px;
    background-image: url(@/assets/huanbg-9bcc2e13.png);
    background-position: center;
    background-size: 100% 100%;
}

.data-ball {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    color: white;
    transition: transform 0.3s ease-in-out;
    animation: bounce 2s infinite ease-in-out;

    &:hover {
        transform: scale(1.2); // 调整为更明显的放大效果
    }
    
    .ball-value {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    .ball-label {
        font-size: 14px;
    }
}

.temperature {
    background: radial-gradient(circle, rgba(255, 149, 0, 0.4) 0%, rgba(255, 94, 58, 0.8) 100%);
    box-shadow: 0 0 15px rgba(255, 94, 58, 0.5);
    animation-delay: 0s; /* 温度球动画延迟 */
}

.humidity {
    background: radial-gradient(circle, rgba(52, 152, 219, 0.4) 0%, rgba(41, 128, 185, 0.8) 100%);
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.5);
    animation-delay: 0.2s; /* 湿度球动画延迟 */
}

.light {
    background: radial-gradient(circle, rgba(241, 196, 15, 0.4) 0%, rgba(243, 156, 18, 0.8) 100%);
    box-shadow: 0 0 15px rgba(243, 156, 18, 0.5);
    animation-delay: 0.6s; /* 光照球动画延迟 */
}

.co2 {
    background: radial-gradient(circle, rgba(46, 204, 113, 0.4) 0%, rgba(39, 174, 96, 0.8) 100%);
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.5);
    animation-delay: 0.4s; /* CO2球动画延迟 */
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}
</style>
